<template>
  <BasicLayout>

<!--    <template #wrapper v-if="role === 'customer_for_c'">-->
<!--&lt;!&ndash;    <template #wrapper v-if="role === 'admin'">&ndash;&gt;-->
<!--      <el-form label-width="30px">-->
<!--        <el-form-item>-->
<!--          <img src="@/assets/warning.png" class="img-circle img-lg">-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--        <span>-->
<!--        【充值说明】<br>-->
<!--     本站仅对vip客户开放，如需充值/开通vip，请联系客户QQ:2491351073<br><br>-->
<!--        【充值权益说明】<br>-->
<!--     累计充值满500元，可解锁无限链接条数（非会员最多创建199条链接）<br>-->
<!--     累计充值满1000元，可使用批量创建API<br>-->
<!--     累计充值满2000元，可发布境外链接<br>-->
<!--     累计充值满5000元，可解锁数据看板功能<br>-->
<!--      </span>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </template>-->
<!--    <template #wrapper v-else>-->
    <template #wrapper>
      <div style="margin-top: 20px">
        <span style="font-size: 16px">余额充值</span>
      </div>
      <el-divider></el-divider>
      <el-form ref="orderForm" :model="orderForm" label-width="80px">
        <!--        <el-form-item label="充值账户" prop="name">-->
        <!--          <el-input style="width: 200px" v-model="orderForm.phone" readonly="true"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="账户余额" prop="name">
          {{ orderForm.amount }} 元
        </el-form-item>
        <el-form-item label="充值金额" prop="name">
          <el-input-number controls-position="right" v-model="orderForm.rechargeAmount" :min="1" :max="1000000000"
                           label="请输入充值金额"></el-input-number>
          元

        </el-form-item>
        <el-form-item label="充值方式" prop="name">
          <el-radio v-model="orderForm.payMethod" label="1">支付宝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrder">立即充值</el-button>
        </el-form-item>
      </el-form>

      <el-dialog :title="title" :visible.sync="openConfirm" width="500px">
        <el-form ref="form" label-width="80px">
          <span>确认是否已经完成支付?</span>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmOrder">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </template>
  </BasicLayout>
</template>

<script>
  import {addRechargeOrder, getTOrder, updateTOrder} from '@/api/torder'
  import {getAccount} from '@/api/tuser'
  import store from '@/store'
  import {mapState} from "vuex";

  export default {
    name: 'OrderAdd',
    components: {},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        isEdit: false,
        fileOpen: false,
        fileIndex: undefined,
        // 类型数据字典
        typeOptions: [],
        torderList: [],

        // 关系表类型

        // 查询参数
        queryParams: {
          pageIndex: 1,
          pageSize: 10,

        },
        // 表单参数
        orderForm: {
          payMethod: "1",
          phone: "11",
          amount: "",
          orderNo: ""
        },
        openConfirm: false,
        // 表单校验
        rules: {}
      }
    },
    computed: {
      ...mapState({
        sidebar: state => state.app.sidebar,
        device: state => state.app.device,
        role: state => state.user.roles[0],
        needTagsView: state => state.settings.tagsView,
        fixedHeader: state => state.settings.fixedHeader
      }),
    },
    created() {
      this.getUserAccount()
    },
    methods: {
      /** 查询参数列表 */
      getUserAccount() {
        getAccount(parseInt(store.getters.userId)).then(response => {
          if (response.code === 200) {
            this.orderForm.amount = response.data.amount
            this.orderForm.userId = parseInt(store.getters.userId)
            // this.orderForm.phone = store.getters.phone
          }
        })
      },
      addOrder() {
        this.openConfirm = false
        addRechargeOrder(this.orderForm).then(response => {
          if (response.code == 200) {
            this.orderForm.id = response.data.id
            window.open(response.data.url, '_blank');
            this.openConfirm = true
          }
        })
      },
      confirmOrder() {
        getTOrder(this.orderForm.id).then(response => {
          if (response.code == 200 && response.data.status == 2) {
            this.$message({
              message: '充值成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: '充值支付中',
              type: 'success'
            });
          }
          this.orderForm.id = 0
          this.openConfirm = false
        })
      },
      // 取消按钮
      cancel() {
        this.openConfirm = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {

          OID: undefined,
          userId: undefined,
          orderNo: undefined,
          payType: undefined,
          amount: undefined,
          status: undefined,
          minusAmount: undefined,
          ip: undefined,
        }
        this.resetForm('form')
      },
      getImgList: function () {
        this.form[this.fileIndex] = this.$refs['fileChoose'].resultList[0].fullUrl
      },
      fileClose: function () {
        this.fileOpen = false
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.OID !== undefined) {
              updateTOrder(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            } else {
              addRechargeOrder(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('新增成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            }
          }
        })
      },
    }
  }
</script>
